<template>
  <el-card v-loading="loading" class="page-card">
    <div class="basicinfo">
      <abstract-form
        ref="form"
        :model="form"
        class="basicinfo__form"
        :rules="rules"
      >
        <el-form-item label="编号" prop="tel">
          <!-- <el-input v-model="form.tel" maxlength="20" /> -->
          <abstract-input
            v-model="form.number"
            flex
            :text="number"
            @submit="submit({ tel: form.number }, $event)"
          ></abstract-input>
        </el-form-item>
        <el-form-item label="手机" prop="tel">
          <!-- <el-input v-model="form.tel" maxlength="20" /> -->
          <abstract-input
            v-model="form.tel"
            flex
            :text="tel"
            @submit="submit({ tel: form.tel }, $event)"
          ></abstract-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <!-- <el-input v-model="form.email" maxlength="20" /> -->
          <abstract-input
            v-model="form.email"
            flex
            :text="email"
            @submit="submit({ email: form.email }, $event)"
          ></abstract-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <!-- <el-input v-model="form.name" maxlength="20" /> -->
          <span>{{ form.name }}</span>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <div style="display: flex">
            <span style="flex: 1">*********</span>
            <el-button type="text" size="small" @click="editPassword"
              >修改</el-button
            >
          </div>
        </el-form-item>
        <!-- <el-form-item label="密码" prop="password">
            <el-input
              v-model="form.newPassword"
              type="newPassword"
              maxlength="20"
            />
          </el-form-item> -->
        <!-- <el-form-item>
            <el-button type="primary" size="small" @click="comfirm"
              >保存</el-button
            >
          </el-form-item> -->
      </abstract-form>
    </div>
    <edit-password-dialog v-model="editPasswordDialog"></edit-password-dialog>
  </el-card>
</template>

<script>
import AbstractForm from '@/components/abstract/Form'
import AbstractInput from '@/components/abstract/Input'
import EditPasswordDialog from './components/EditPasswordDialog.vue'
import { request } from '@/api/request'

export default {
  name: 'BasicInformation',

  components: {
    AbstractForm,
    AbstractInput,
    EditPasswordDialog
  },

  data() {
    return {
      editPasswordDialog: false,
      loading: false,
      form: {
        tel: null,
        email: null,
        name: null,
        number: null,
        newPassword: ''
      },
      tel: null,
      email: null,
      number: null,
      rules: {
        // name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        // tel: [{ required: true, message: '请输入手机号码', trigger: 'blur' }]
        // password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }
    }
  },

  mounted() {
    this.getBasicInfo()
  },

  methods: {
    editPassword() {
      this.editPasswordDialog = true
    },

    comfirm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          request(
            'personal/basicInfo/update',
            {
              data: JSON.stringify({
                tel: this.form.tel,
                email: this.form.email,
                name: this.form.name
              })
            },
            () => {
              this.$message.success('提交成功')
              this.getBasicInfo()
            }
          )
        } else {
          return false
        }
      })
    },

    submit(data, { callback }) {
      request(
        'personal/basicInfo/update',
        {
          data: JSON.stringify(data)
        },
        () => {
          this.$message.success('提交成功')
          this.getBasicInfo()
        }
      ).finally(() => {
        callback()
      })
    },

    getBasicInfo() {
      this.loading = true
      request('personal/basicInfo/index', {}, (res) => {
        res.data.password = ''
        this.form = res.data
        this.tel = this.form.tel
        this.email = this.form.email
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" src="./style.scss" scoped></style>
